
<%@ page language="java" pageEncoding="UTF-8"
	contentType="text/html;charset=UTF8"%>

<%@include file="/commonSetting.jsp"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>

		<title>2列左侧固定右侧自适应宽度，未知高度+头部+导航+尾部——<a href="http://www.aa25.cn">标准之路www.aa25.cn</a></title>
		
		<meta name="Keywords" content="标准之路,www.aa25.cn,网页标准布局,DIV+CSS" />
		<meta name="" content="标准之路,www.aa25.cn,网页标准布局,DIV+CSS" />
		<meta name="author" content"×××,有问题请到 www.68css.cn 网站留言" />
		<meta name="Description" content="本套网页标准布局模板是由标准之路（www.aa25.cn）制作完成，如果您要转载，请保留版权" />
		
		<!-- jquery -->
		<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
		
		<!-- page layout -->
		<link href="${ctx}/module/layout/layout1/layout.css" rel="stylesheet" type="text/css" />
		
		<!-- menu style and js -->
		<link rel="stylesheet" type="text/css" href="${ctx}/module/layout/layout1/menu.css" media="screen" />
		<script type="text/javascript" src="${ctx}/module/layout/layout1/menu.js"></script>		
		
		<script type="text/javascript">
			$(function(){
				$("#sidebar>ul>li>a:first").click();
			});
			
			function loadContent(obj)
			{
				var rootdomain="http://"+window.location.hostname+":8080${ctx}/";
				var contextUri = $(obj).attr("id");
			//	alert(rootdomain);
				// $("#content").load(rootdomain + contextUri);
				$("#iframeContent").attr("src", rootdomain + contextUri);
			}
		</script>
	</head>

	<body>
		<div id="container">
		  <div id="header">This is the Header</div>
		  <br class="clearfloat" />
		  <div id="menu">This is the Menu</div>
		  <br class="clearfloat" />
		  
		  <div id="mainContent">
		      <div id="sidebar">
			      	<ul class="categories-ul">
						<li class="cat-item cat-item-72">
							<a title="查看 办公软件 下的所有文章" id="module/layout/content.jsp" href="javascript:void(0);" onclick="loadContent(this);">content.jsp</a>
							<ul class="children">
								<li class="cat-item cat-item-130">
									<a title="查看 Office套件 下的所有文章" id="module/jCarouselLite/ScrollDemo.jsp" href="javascript:void(0);" onclick="loadContent(this);">ScrollDemo.jsp</a>
								</li>
								<li class="cat-item cat-item-134">
									<a title="查看 PDF 下的所有文章" href="#">PDF</a>
								</li>
								<li class="cat-item cat-item-135">
									<a title="查看 压缩解压 下的所有文章" href="#">压缩解压</a>
								</li>
								<li class="cat-item cat-item-131">
									<a title="查看 文本浏览 下的所有文章" href="#">文本浏览</a>
								</li>
								<li class="cat-item cat-item-132">
									<a title="查看 文档管理 下的所有文章" href="#">文档管理</a>
								</li>
								<li class="cat-item cat-item-133">
									<a title="查看 输入法 下的所有文章" href="#">输入法</a>
								</li>
							</ul>
						</li>
						<li class="cat-item cat-item-74">
							<a title="查看 商业软件 下的所有文章" href="#">商业软件</a>
							<ul class="children">
								<li class="cat-item cat-item-145">
									<a title="查看 CRM 下的所有文章" href="#">CRM</a>
								</li>
								<li class="cat-item cat-item-146">
									<a title="查看 SEO 下的所有文章" href="#">SEO</a>
								</li>
								<li class="cat-item cat-item-141">
									<a title="查看 会计计费 下的所有文章" href="#">会计计费</a>
								</li>
								<li class="cat-item cat-item-142">
									<a title="查看 库存管理 下的所有文章" href="#">库存管理</a>
								</li>
								<li class="cat-item cat-item-144">
									<a title="查看 数据库管理 下的所有文章" href="#">数据库管理</a>
								</li>
								<li class="cat-item cat-item-147">
									<a title="查看 语音识别 下的所有文章" href="#">语音识别</a>
								</li>
								<li class="cat-item cat-item-143">
									<a title="查看 项目管理 下的所有文章" href="#">项目管理</a>
								</li>
							</ul>
						</li>
					</ul>
			    </div>
			    <div id="content">
			    	<iframe id="iframeContent">
			    	3像素问题及解决办法 
					当使用float浮动容器后，在IE6下会产生3px的空隙，有意思的是右侧容器没设置高度时3px在右侧容器内部，当设定高度后又跑到容器的左侧了，所以对布局精度要求高的话，请参考例29、31的解决方法 
					上边容器浮动后，下边的容器跟着浮动，造成页面错乱 
					如以上例子中的footer必须要单独占一行，但当sidebar浮动后，content的高度小于sidebar的高度时，footer也跟着浮动到sidebar右侧了，造成页面错乱。解决办法是在maincontent和footer之间插入一个容器，设置样式 clear:both; height:0; font-size: 1px; line-height: 0px;用clear:both清除，即可使页面正常 
					当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？ 
					这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性，overflow:auto;是让父容器来自适应内部容器的高度，zoom:1;是为了兼容IE6而使用的CSS HACK。zoom:1;通不过W3C的验证，这也是遗憾的一点，幸好IE支持
					<!--[if IE]>这种写法，可以专门针对IE来写单独的样式，所以可以把这个属性写在页面内的<!--[if IE]>
					中，这样应该可以通过验证了 
					相对定位与绝对定位 
					规划页面时，许多时候需要用到相对定位或绝对定位，这里边有个技巧，掌握后有些地方就不用繁冗的js了。就是当父容器使用相对定位后，此时子元素再使用绝对定位，位置是相对于父元素。如果父元素没有定位，那么子元素的绝对定位是相对于浏览器 
					IE6双倍边距bug 
					当页面内有多个连续浮动时，如本页的图标列表是采用左浮动，此时设置li的左侧margin值时，在最左侧呈现双倍情况。如外边距设置为10px，而左侧则呈现出20px，解决它的方法是在浮动元素上加上display:inline;的样式，这样就可避免双倍边距bug 
			   		
			   		本例和例21差不多，一个是固定宽度，一个是自适应，同样是未知高度。<br />
				      <br />
				    　　此例中需要说明一点的是：当content设定高度后，3像素会跑到content外侧，反之，在content内部。这样，我们用!important修正在ie下向左多浮动2像素，加上3像素的bug正好是5像素，所以在火狐和IE下显示是一样的，这是大家必须注意的一点。而当content设定高度后，如100px，那么在IE6下，当高度超过100px时，它会自动把conent撑高，而火狐去不会。所以用!important修正在IE下设定高度值使它的3像素跑到外侧，火狐下因不存在3像素问题，所以高度自动。<br />
				      <br />
				      <br />
				　　总之，实现的方法是多种多样的，这只是本人在学习过程中总结的一点经验，权当抛砖引玉，希望能对您有所帮助，当然您有更好的办法和布局，欢迎一块来学习，交流，让web标准在中国得到更好的发展。同时希望您继续关注标准之路(www.aa25.cn)<br />
				<br />
				　　如果您要实现未知高度底部平齐，请参考49例<br />
					</iframe>
			    </div>
		  </div>
		  <br class="clearfloat" />
		  <div id="footer">This is the footer<span style="display:none"></span></div>
		</div>
	</body>
</html>
